<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>日期示例</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
</head>
<body>
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<style>
		.demo-exp-code td{padding:5px 0;}
		.demo-exp-code td.r-label{padding-right: 10px;}
	</style>
	<h2>快速日期框</h2>
	<h3>说明:</h3>
	<span>快速日期框（dateboxq）在初始化时不初始化日历，按钮实现方式不再一样，在IE8或IE11下速度大大提高。</span>
	<span>支持快捷t方式输入,t+2表示二天后,t-2表示二天前的日期。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
		<table> 
				<tr>
					<td class='r-label'>统计月份</td>
					<td class='r-label'>
						<input id="samth" class="hisui-dateboxq textbox" data-options="onSelect:onSelect,formatter:function(date){var y = date.getFullYear(); var m = date.getMonth()+1;return y+'-'+m;},validParams:'YM'"/>
					</td>
					<td></td>
					<td class='r-label'>
						<a class="hisui-linkbutton" id="samthBtn">获取值</a>
					</td>
				</tr>
				<tr>
					<td class='r-label'>限定一周</td>
					<td>
						<input id="db" class="hisui-dateboxq textbox" data-options='onSelect:onSelect'/>
					</td>
					<td class='r-label'>
						<a class="hisui-linkbutton" id="setDateDisBtn">限定可选日期</a>
					</td>
					<td>
						<a class="hisui-linkbutton" id="dbBtn">获取值</a>
					</td>
				</tr>
				<tr>
					<td class='r-label'>年月日中文格式</td>
					<td>
						<input id="self1db" class="hisui-dateboxq textbox" data-options='format:"yyyy年MM月dd日"'/>
					</td>
					<td></td>
					<td class='r-label'>
						<a class="hisui-linkbutton" id="self1dbBtn">获取值</a>
					</td>
				</tr>
				<tr>
					<td class='r-label'>年-月-日格式</td>
					<td>
						<input id="self3db" class="hisui-dateboxq textbox" data-options='format:"yyyy-MM-dd"'/>
					</td>
					<td class='r-label'>
						<a class="hisui-linkbutton" id="self3dbSetBtn">设置值</a>
					</td>
					<td>
						<a class="hisui-linkbutton" id="self3dbBtn">获取值</a>
					</td>
				</tr>
				<tr>
					<td class='r-label'>日/月/年格式</td>
					<td>
						<input id="self4db" class="hisui-dateboxq textbox" data-options='format:"dd/MM/yyyy"'/>
					</td>
					<td></td>
					<td class='r-label'>
						<a class="hisui-linkbutton" id="self4dbBtn">获取值</a>
					</td>
				</tr>
		</table>
		</div>
		<script class="use-prettyprint">
			function onSelect(date){
				$('#result').text(date)
			}
			$.parser.onComplete = function(){
				$('#db').dateboxq('calendar').calendar({
					validator:function(date){
						var now = new Date();
						return date<=now;
					}
				});
				$("#samthBtn").click(function(){
					var val = $("#samth").dateboxq('getValue');
					$.messager.alert( "提示",val);
				});
				$("#setDateDisBtn").click(function(){
					var now = new Date();
					var now6 = new Date();
					now6.setTime(now.getTime()+(6*24*60*60*1000));
					var opt = $("#db").dateboxq('options');
					opt.minDate = opt.formatter(now); //'2019-11-24';
					opt.maxDate = opt.formatter(now6); //'2019-11-30';
					$.messager.popover({msg: '设置可选日期范围成功',type:'success',timeout: 1000});
				});
				$("#dbBtn").click(function(){
					var val = $("#db").dateboxq('getValue');
					$.messager.alert( "提示",val);
				});
				$("#self1dbBtn").click(function(){
					var val = $("#self1db").dateboxq('getValue');
					$.messager.alert( "提示",val);
				});
				$("#self3dbBtn").click(function(){
					var val = $("#self3db").dateboxq('getValue');
					if (val){
						//取到Date日期对象
						var valDateObj = $("#self3db").dateboxq('options').parser(val);
						console.log(valDateObj.getTime());
					}
					$.messager.alert( "提示",val);
				});
				$("#self3dbSetBtn").click(function(){
					var date = new Date();
					date.setDate(1);
					var jobj = $("#self3db");
					var dateText = jobj.dateboxq('options').formatter(date);
					jobj.dateboxq('setValue',dateText);
				});
				$("#self4dbBtn").click(function(){
					var val = $("#self4db").dateboxq('getValue');
					$.messager.alert( "提示",val);
				});
			};
		</script>
	</div>
	
<table class="table">
	<tr class="protitle">
		<th>属性</th>
		<th>说明</th>
		<th>默认值</th>
		<th></th>
	</tr>
	<tr>
		<td>validParams</td>
		<td>默认值为YMD。表示日期显示成YYYY-MM-DD</td>
		<td>YMD</td>
		<td>如果是其它格式则不强制检查. 如配置成YM再实现formatter可实现例1效果</td>
	</tr>
	<tr>
		<td>minDate</td>
		<td>可选最小日期。如:2019-11-25</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr>
		<td>maxDate</td>
		<td>可选最大日期。如:2019-11-25</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr>
		<td>format</td>
		<td>日期格式(yyyy-MM-dd,dd/MM/yyyy,yyyy年MM月dd日)</td>
		<td>''</td>
		<td>默认空时走formatter,不为空时强制覆盖formatter方法，实现对应格式<code>2020-12-31</code></td>
	</tr>
	<tr>
		<td>options</td>
		<td>获得配置项目</td>
		<td>默认null</td>
		<td></td>
	</tr>
	<tr class="mthtitle">
		<th>方法名</th>
		<th>说明</th>
		<th>入参</th>
		<th>返回值</th>
	</tr>
	
	<tr>
		<td>setValue</td>
		<td>设置日期框值。(如："yyyy-MM-dd")</td>
		<td>value</td>
		<td></td>
	</tr>
	<tr>
		<td>getValue</td>
		<td>获得日期值</td>
		<td></td>
		<td>格式化字符串日期</td>
	</tr>
	<tr>
		<td>setDisabled</td>
		<td>禁用日期框. false表示启用日期框，true表示禁用日期框</td>
		<td>value</td>
		<td></td>
	</tr>
	<tr>
		<td>disable</td>
		<td>禁用日期框</td>
		<td>无</td>
		<td></td>
	</tr>
	<tr>
		<td>enable</td>
		<td>启用日期框</td>
		<td>无</td>
		<td></td>
	</tr>
	<tr class="evttitle">
		<th>事件</th>
		<th>说明</th>
		<th>默认值</th>
		<th></th>
	</tr>
	<tr>
		<td>onSelect</td>
		<td>date</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>onChange</td>
		<td>newVal,oldValue</td>
		<td></td>
		<td></td>
	</tr>
</table>
<prettyprint/>
</body>
</html>